/* 
 Credits to
 GitHub Repository: https://github.com/MathiasOxholm/humbleScroll
 User: MathiasOxholm

 */
:root {
    --cdhs-delay: 0ms;
    --cdhs-easing: var(--cdhs-ease-out);
    --cdhs-duration: 600ms;
    --cdhs-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --cdhs-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --cdhs-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --cdhs-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --cdhs-opacity: 1;
    --cdhs-translate-y: 0;
    --cdhs-translate-x: 0;
    --cdhs-scale: 1;
    --cdhs-rotate: 0deg;
    --cdhs-perspective: 0;
    --cdhs-rotate-x: 0deg;
    --cdhs-rotate-y: 0deg;
    --cdhs-skew-x: 0deg;
    --cdhs-skew-y: 0deg;
    --cdhs-translate-ratio: 1;
    --cdhs-scale-ratio: 0.2;
    --cdhs-duration-ratio: 1;
    --cdhs-translate-x-amount: 2rem;
    --cdhs-translate-y-amount: 3rem;
    --cdhs-flip-x-amount: 100deg;
    --cdhs-flip-y-amount: -100deg;
    --cdhs-perspective-amount: 2000px;
    --cdhs-stagger-amount: 100ms;
    --cdhs-skew-amount: 20deg;
    --cdhs-reveal-amount: 100%;
    --cdhs-blur: 0;
    --cdhs-blur-amount: 5px
}

[data-cdhs*=ease-in] {
    --cdhs-easing: var(--cdhs-ease-in)
}

[data-cdhs*=ease-out] {
    --cdhs-easing: var(--cdhs-ease-out)
}

[data-cdhs*=ease-in-out] {
    --cdhs-easing: var(--cdhs-ease-in-out)
}

[data-cdhs*=ease-out-back] {
    --cdhs-easing: var(--cdhs-ease-out-back)
}

[data-cdhs*=sm] {
    --cdhs-translate-ratio: 0.5
}

[data-cdhs*=md] {
    --cdhs-translate-ratio: 0.75
}

[data-cdhs*=lg] {
    --cdhs-translate-ratio: 1.5
}

[data-cdhs*=xl] {
    --cdhs-translate-ratio: 2
}

[data-cdhs*="2xl"] {
    --cdhs-translate-ratio: 3
}

[data-cdhs~=extra-slow] {
    --cdhs-duration-ratio: 3
}

[data-cdhs~=slow] {
    --cdhs-duration-ratio: 1.5
}

[data-cdhs~=fast] {
    --cdhs-duration-ratio: 0.75
}

[data-cdhs~=extra-fast] {
    --cdhs-duration-ratio: 0.5
}

[data-cdhs*=fade],
[data-cdhs*=zoom] {
    --cdhs-opacity: 0
}

[data-cdhs*=zoom-in] {
    --cdhs-scale: calc(1 + var(--cdhs-scale-ratio))
}

[data-cdhs*=zoom-out] {
    --cdhs-scale: calc(1 - var(--cdhs-scale-ratio))
}

[data-cdhs~=up] {
    --cdhs-translate-y: calc(var(--cdhs-translate-y-amount)*var(--cdhs-translate-ratio))
}

[data-cdhs~=down] {
    --cdhs-translate-y: calc(0px - var(--cdhs-translate-y-amount)*var(--cdhs-translate-ratio))
}

[data-cdhs~=left] {
    --cdhs-translate-x: calc(var(--cdhs-translate-x-amount)*var(--cdhs-translate-ratio))
}

[data-cdhs~=right] {
    --cdhs-translate-x: calc(0px - var(--cdhs-translate-x-amount)*var(--cdhs-translate-ratio))
}

[data-cdhs*=flip] {
    --cdhs-perspective: var(--cdhs-perspective-amount);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

[data-cdhs*=flip-up] {
    --cdhs-rotate-x: calc(0deg - var(--cdhs-flip-x-amount))
}

[data-cdhs*=flip-down] {
    --cdhs-rotate-x: var(--cdhs-flip-x-amount)
}

[data-cdhs*=flip-left] {
    --cdhs-rotate-y: calc(0deg - var(--cdhs-flip-y-amount))
}

[data-cdhs*=flip-right] {
    --cdhs-rotate-y: var(--cdhs-flip-y-amount)
}

[data-cdhs*=blur] {
    --cdhs-blur: var(--cdhs-blur-amount)
}

[data-cdhs*=skew-up] {
    --cdhs-skew-y: var(--cdhs-skew-amount)
}

[data-cdhs*=skew-down] {
    --cdhs-skew-y: calc(0deg - var(--cdhs-skew-amount))
}

[data-cdhs*=skew-right] {
    --cdhs-skew-x: var(--cdhs-skew-amount)
}

[data-cdhs*=skew-left] {
    --cdhs-skew-x: calc(0deg - var(--cdhs-skew-amount))
}

[data-cdhs*=reveal] {
    overflow: hidden
}

[data-cdhs*=reveal-up] * {
    --cdhs-translate-y: var(--cdhs-reveal-amount)
}

[data-cdhs*=reveal-down] {
    --cdhs-translate-y: calc(0px - var(--cdhs-reveal-amount))
}

[data-cdhs*=reveal-right] {
    --cdhs-translate-x: calc(0px - var(--cdhs-reveal-amount))
}

[data-cdhs*=reveal-left] {
    --cdhs-translate-x: var(--cdhs-reveal-amount)
}

@media (prefers-reduced-motion:no-preference) {
    [data-cdhs] {
        filter: blur(var(--cdhs-blur));
        opacity: var(--cdhs-opacity);
        transform: translate3d(var(--cdhs-translate-x), var(--cdhs-translate-y), 0) scale(var(--cdhs-scale)) rotate(var(--cdhs-rotate)) perspective(var(--cdhs-perspective)) rotateX(var(--cdhs-rotate-x)) rotateY(var(--cdhs-rotate-y)) skew(var(--cdhs-skew-x), var(--cdhs-skew-y));
        transition-delay: var(--cdhs-delay);
        transition-duration: calc(var(--cdhs-duration)*var(--cdhs-duration-ratio));
        transition-property: transform, opacity, filter;
        transition-timing-function: var(--cdhs-easing)
    }

    [data-cdhs]:not(.cdhs-inview) {
        pointer-events: none
    }

    [data-cdhs].cdhs-inview {
        --cdhs-opacity: 1;
        --cdhs-translate-y: 0;
        --cdhs-translate-x: 0;
        --cdhs-scale: 1;
        --cdhs-rotate: 0deg;
        --cdhs-rotate-x: 0deg;
        --cdhs-rotate-y: 0deg;
        --cdhs-skew-x: 0deg;
        --cdhs-skew-y: 0deg;
        --cdhs-blur: 0;
        pointer-events: auto
    }
}

@media (max-width:768px) {
    body [data-cdhs*="phone:zoom-in"] {
        --cdhs-scale: calc(1 + var(--cdhs-scale-ratio))
    }

    body [data-cdhs*="phone:zoom-out"] {
        --cdhs-scale: calc(1 - var(--cdhs-scale-ratio))
    }

    body [data-cdhs*="phone:up"] {
        --cdhs-translate-y: calc(var(--cdhs-translate-y-amount)*var(--cdhs-translate-ratio))
    }

    body [data-cdhs*="phone:down"] {
        --cdhs-translate-y: calc(0px - var(--cdhs-translate-y-amount)*var(--cdhs-translate-ratio))
    }

    body [data-cdhs*="phone:left"] {
        --cdhs-translate-x: calc(var(--cdhs-translate-x-amount)*var(--cdhs-translate-ratio))
    }

    body [data-cdhs*="phone:right"] {
        --cdhs-translate-x: calc(0px - var(--cdhs-translate-x-amount)*var(--cdhs-translate-ratio))
    }

    body [data-cdhs*="phone:flip-up"] {
        --cdhs-rotate-x: calc(0deg - var(--cdhs-flip-x-amount))
    }

    body [data-cdhs*="phone:flip-down"] {
        --cdhs-rotate-x: var(--cdhs-flip-x-amount)
    }

    body [data-cdhs*="phone:flip-left"] {
        --cdhs-rotate-y: calc(0deg - var(--cdhs-flip-y-amount))
    }

    body [data-cdhs*="phone:flip-right"] {
        --cdhs-rotate-y: var(--cdhs-flip-y-amount)
    }

    body [data-cdhs*="phone:blur"] {
        --cdhs-blur: var(--cdhs-blur-amount)
    }
}

@media (min-width:768px) {
    body [data-cdhs*="tablet:zoom-in"] {
        --cdhs-scale: calc(1 + var(--cdhs-scale-ratio))
    }

    body [data-cdhs*="tablet:zoom-out"] {
        --cdhs-scale: calc(1 - var(--cdhs-scale-ratio))
    }

    body [data-cdhs*="tablet:up"] {
        --cdhs-translate-y: calc(var(--cdhs-translate-y-amount)*var(--cdhs-translate-ratio))
    }

    body [data-cdhs*="tablet:down"] {
        --cdhs-translate-y: calc(0px - var(--cdhs-translate-y-amount)*var(--cdhs-translate-ratio))
    }

    body [data-cdhs*="tablet:left"] {
        --cdhs-translate-x: calc(var(--cdhs-translate-x-amount)*var(--cdhs-translate-ratio))
    }

    body [data-cdhs*="tablet:right"] {
        --cdhs-translate-x: calc(0px - var(--cdhs-translate-x-amount)*var(--cdhs-translate-ratio))
    }

    body [data-cdhs*="tablet:flip-up"] {
        --cdhs-rotate-x: calc(0deg - var(--cdhs-flip-x-amount))
    }

    body [data-cdhs*="tablet:flip-down"] {
        --cdhs-rotate-x: var(--cdhs-flip-x-amount)
    }

    body [data-cdhs*="tablet:flip-left"] {
        --cdhs-rotate-y: calc(0deg - var(--cdhs-flip-y-amount))
    }

    body [data-cdhs*="tablet:flip-right"] {
        --cdhs-rotate-y: var(--cdhs-flip-y-amount)
    }

    body [data-cdhs*="tablet:blur"] {
        --cdhs-blur: var(--cdhs-blur-amount)
    }
}

@media (min-width:1240px) {
    body [data-cdhs*="desktop:zoom-in"] {
        --cdhs-scale: calc(1 + var(--cdhs-scale-ratio))
    }

    body [data-cdhs*="desktop:zoom-out"] {
        --cdhs-scale: calc(1 - var(--cdhs-scale-ratio))
    }

    body [data-cdhs*="desktop:up"] {
        --cdhs-translate-y: calc(var(--cdhs-translate-y-amount)*var(--cdhs-translate-ratio))
    }

    body [data-cdhs*="desktop:down"] {
        --cdhs-translate-y: calc(0px - var(--cdhs-translate-y-amount)*var(--cdhs-translate-ratio))
    }

    body [data-cdhs*="desktop:left"] {
        --cdhs-translate-x: calc(var(--cdhs-translate-x-amount)*var(--cdhs-translate-ratio))
    }

    body [data-cdhs*="desktop:right"] {
        --cdhs-translate-x: calc(0px - var(--cdhs-translate-x-amount)*var(--cdhs-translate-ratio))
    }

    body [data-cdhs*="desktop:flip-up"] {
        --cdhs-rotate-x: calc(0deg - var(--cdhs-flip-x-amount))
    }

    body [data-cdhs*="desktop:flip-down"] {
        --cdhs-rotate-x: var(--cdhs-flip-x-amount)
    }

    body [data-cdhs*="desktop:flip-left"] {
        --cdhs-rotate-y: calc(0deg - var(--cdhs-flip-y-amount))
    }

    body [data-cdhs*="desktop:flip-right"] {
        --cdhs-rotate-y: var(--cdhs-flip-y-amount)
    }

    body [data-cdhs*="desktop:blur"] {
        --cdhs-blur: var(--cdhs-blur-amount)
    }
}